import React from 'react';
import { MediaItem } from '../types';
import './MediaList.css';

interface MediaListProps {
    media: MediaItem[];
    activeTab: 'images' | 'videos' | 'music';
    deleteItem: (type: 'images' | 'videos' | 'music', id: string) => void;
    toggleSelect: (id: string) => void;
    isSelected: (id: string) => boolean;
}

const MediaList: React.FC<MediaListProps> = ({ media, activeTab, deleteItem, toggleSelect, isSelected }) => {
    return (
        <div>
            <div style={{ fontSize: '14px', color: '#2f79f0', marginTop: '4%', marginLeft: '5%', fontWeight: 'bold' }}>
                {activeTab === 'images' ? '全部图片' : activeTab === 'videos' ? '全部视频' : '全部音乐'} ({media.length})
            </div>
            <ul style={{ listStyleType: 'none', padding: 0 }}>
                {media.map(item => (
                    <li key={item.id} className="media-item">
                        <div className="image-container" style={{ position: 'relative' }}>
                            <input
                                style={{
                                    width: '20px', height: '20px', position: 'absolute',
                                    top: '5px',
                                    right: '5px',
                                }}
                                type="checkbox"
                                checked={isSelected(item.id)}
                                onChange={() => toggleSelect(item.id)}
                            />
                            <img style={{ width: '90px', height: '85px', marginLeft: '20%', marginTop: '20%' }} src={item.url} alt={item.name} className="media-image" />
                            <p style={{ width: '150px', height: '30px', background: '#fff', marginTop: '17%', fontSize: '12px', lineHeight: '30px', color: '#afb1b3' }}>
                                <span style={{ marginLeft: '10px' }}>{(item.size / 1024 / 1024).toFixed(2)} MB</span>
                            </p>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default MediaList;